<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>用户详情</title>


    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-grid.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/zoomify.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/zoomstyle.css"/>

    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>

    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
		<link rel="stylesheet" href="../../css/weui.css">
		<link rel="stylesheet" href="../../css/jQuery_WeUI.css">
<link rel="stylesheet" href="../../css/jQuery_WeUI.css">
    <style>
    .member_info_top{
      background-color: #ffffff;
      height: 90px
    }
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .member_portrait{
      float:left;
      height:90px;
      padding:10px;
      display:block;
      border-radius: 20px
    }
    .member_level{
      margin-top: 10px;
      background: #FDD96D;
      text-align: center;
      color: #ffffff;
      border-radius: 5px;
      width: 70px
    }
    .more {
      display: inline-block;
      position: absolute;
      width: 50px;
      height: 45px;
      top: 15px;
      right: 15px;
      background-size: 20px 25px;
      background-position: right;
      background-repeat: no-repeat;
      background-image: url(../../image/big/1_gengduo_1.png);
    }
    .username{
      max-width: 70vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    .top-container {
      overflow: visible;
    }
    </style>
</head>
<body style="height:100%;background:#F7F4F2">
  <div id="blank" class="header" style="-webkit-box-sizing: inherit;box-sizing: inherit;">
      <div v-back.tapmode class="back"></div>
      <span class="title">用户详情</span>
      <div  class="more" v-myclick="showaction"></div>
  </div>
  <div id="app" class="top-container" v-cloak>
    <div class="member_info_top">
      <img data-action="zoom" class="member_portrait" :src="memberinfo.portrait" >
      <div style="float:left;margin-top:16px">
        <div class="username">{{memberinfo.nickname}}</div>
        <div class="member_level" :style="getBg(memberinfo.level_id)">{{memberinfo.name}}</div>
      </div>
    </div>
    <ul class="aui-list aui-list-in " >
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">奶牛数</div>
                <div class="aui-list-item-right">{{memberinfo.cow}}</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">溯源</div>
                <div class="aui-list-item-right">通过{{add_type(memberinfo.add_type)}}</div>
            </div>
        </li>
        <li class="aui-list-item" v-myclick="markname">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">备注</div>
                <div class="aui-list-item-right">{{memberinfo.mark_name}}</div>
            </div>
        </li>
      </ul>
    <div style="margin-top:20px" >
    <div style="background:#ffffff;text-align:center;padding:15px"  v-myclick="[memberinfo, startchat]">发消息</div>

    </div>
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script src="../../script/jQuery_WeUI.js"></script>
<script src="../../script/zoomify.min.js"></script>

<script>

var memberinfo;
apiready = function () {
  setBSImg();
  new Vue({
      el: '#blank',
      methods:{
        showaction:function(){
          $.actions({
            actions: [{
              text: "删除",
              onClick: function() {
                var uid = api.pageParam.uid;
                var data = {
                    member_id: getPrefs('member_id'),
                    friend_id: uid,
                };
                var callback = function (ret) {
                  api.toast({
                      msg: '删除成功',
                      duration: 2000,
                      location: 'middle'
                  });

                  api.sendEvent({
                      name: 'updateClan',
                  });
                  api.sendEvent({
                    name: 'delFriend',
                    extra: {
                        targetId: vm.memberinfo.member_im_id,
                    }
                  });
                  api.closeWin({
                  });
                };
                pinet.post(URL.delFriend, data, callback);
                //do something
              }
            },
            {
              text: "备注",
              onClick: function() {
                api.openWin({
                    name: 'markname',
                    url: './markname.html',
                    pageParam: {
                        nickname: vm.memberinfo.mark_name,
                        friend_id:vm.memberinfo.friend_id,
                    }
                });

              }
            }
          ]
          });
        }
      }
  });

    api.parseTapmode();
    var uid = api.pageParam.uid;

    var data = {
        member_id: getPrefs('member_id'),
        friend_id: uid,
    };
    var callback = function (ret) {
        memberinfo = ret.content;
        console.log(JSON.stringify(memberinfo))

        initApp();
        api.parseTapmode();
        addListeners();
        $('img').zoomify();
    };
    pinet.post(URL.getFriendInfo, data, callback);
};

function initApp() {
    vm = new Vue({
        el: '#app',
        data: {
            memberinfo: memberinfo
        },
        computed: {
        },
        methods: {
          add_type:function (type) {
            switch (type) {
              case '1':
       			return '好友搜索';
       			break;
       			 case '2':
       			return '家族';
       			break;
       				case '3':
       			return '二维码';
       			break;
       				case '4':
       			return '邀请新用户';
       			break;

       			 default:
            }
          },
          getBg: function (level_id) {
            var memberStyle = getMemberStyle(level_id);
            return {
                background:memberStyle.level_bg_color
            };
        },
        markname: function(){
          api.openWin({
              name: 'markname',
              url: './markname.html',
              pageParam: {
                  nickname: this.memberinfo.mark_name,
                  friend_id:this.memberinfo.friend_id,
              }
          });
        },
        reload:function(){
          var uid = api.pageParam.uid;

          var data = {
              member_id: getPrefs('member_id'),
              friend_id: uid,
          };
          var callback = function (ret) {
              memberinfo = ret.content;
              vm.memberinfo = memberinfo;
          };
          pinet.post(URL.getFriendInfo, data, callback);
        },
          startchat:function(member){
            api.openWin({
              reload : true,
              name : 'win_chat',
              url : '../win/win_chat.html',
              pageParam : {
                id : member.member_im_id,
                zh : member.nickname,
                tx : member.portrait,
                level_id:member.level_id,
                friend_id:member.friend_id
              },
              vScrollBarEnabled : false,
            });
            if (getPrefs('member_im_id') == member.member_im_id) {
            } else {
              var rong = api.require('rongCloud2');
              rong.clearMessagesUnreadStatus({
                conversationType : 'PRIVATE',
                targetId : member.member_im_id
              }, function(ret, err) {
              })
            }
            // api.sendEvent({
            // 	name : 'hhxx'
            // });
          },

        }

    });
}

function addListeners(){
  api.addEventListener({
      name: 'updfriend'
  }, function (ret, err) {
      vm.reload();
  });
}
</script>
</html>
